<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>代码生成页面</title>

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link rel="stylesheet" href="layui/css/layui.css">
    <script type="application/javascript" src="layui/layui.js"></script>
</head>
<body>

       <div style="width: auto;height: 50px;text-align: center;" class="layui-bg-cyan">
            <h1 style="vertical-align:middle;">代码生成工具</h1>
       </div>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>数据库信息:现仅仅支持MYSQL数据库。</legend>
    </fieldset>

    <form class="layui-form" lay-filter="test">

        <div class="layui-row layui-form-item">

            <div class="layui-col-md4">
                <div class="layui-input-block layui-row">
                    <div class="layui-col-md2">
                        <label class="layui-form-label-col">数据库类型：</label>
                    </div>
                    <div class="layui-col-md8">
                        <select id="dbtype" >
                            <option value=""></option>
                            <option value="1" selected = "">MYSQL</option>
                            <option value="2" >ORACLE</option>
                        </select>
                    </div>
                </div>
            </div>

        </div>

        <div class="layui-row layui-form-item" style="margin-top: 20px">

            <div class="layui-col-md4 ">
                <div class="layui-input-block layui-row">
                    <div class="layui-col-md2">
                        <label class="layui-form-label-col"> IP：</label>
                    </div>
                    <div class="layui-col-md8">
                        <input type="text" name="ip" required lay-verify="required\number" placeholder="请输入数据库的ip地址" class="layui-input" id="ip">
                    </div>
                </div>
            </div>

            <div class="layui-col-md4">

                <div class="layui-input-block layui-row">
                    <div class="layui-col-md2">
                        <label class="layui-form-label-col"> Port：</label>
                    </div>
                    <div class="layui-col-md8">
                        <input type="text" name="port"  placeholder="请输入数据库的端口" class="layui-input" id="port">
                    </div>
                </div>

            </div>

            <div class="layui-col-md4">

                <div class="layui-input-block layui-row">
                    <div class="layui-col-md2">
                        <label class="layui-form-label-col"> 数据库名称：</label>
                    </div>
                    <div class="layui-col-md8">
                        <input type="text" name="dbName"  placeholder="请输入数据库名称;ORACLE则为服务名默认为orcl" class="layui-input" id="dbName">
                    </div>
                </div>

            </div>

        </div>

        <div class="layui-row layui-form-item" style="margin-top: 20px">

            <div class="layui-col-md4 ">
                <div class="layui-input-block layui-row">
                    <div class="layui-col-md2">
                        <label class="layui-form-label-col"> 用户名：</label>
                    </div>
                    <div class="layui-col-md8">
                        <input type="text" name="username" required lay-verify="required\number" placeholder="请输入数据库的用户名" class="layui-input" id="username">
                    </div>
                </div>
            </div>

            <div class="layui-col-md4">

                <div class="layui-input-block layui-row">
                    <div class="layui-col-md2">
                        <label class="layui-form-label-col"> 密码：</label>
                    </div>
                    <div class="layui-col-md8">
                        <input type="text" name="password"  placeholder="请输入数据库的密码" class="layui-input" id="password">
                    </div>
                </div>

            </div>

        </div>

        <div class="layui-row" style="margin-top: 20px">

            <div class="layui-col-md4">
                <div class="layui-col-md2 layui-col-md-offset2">
                    <button type="button" class="layui-btn" id="ljcs">连接测试</button>

                    <script>
                        layui.use(['form', 'layedit', 'laydate','element','jquery'], function() {
                            var form = layui.form,
                                layer = layui.layer,
                                element=layui.element,
                                $=layui.$;
                            $(document).on('click','#ljcs',function(){

                                var ipobj = document.getElementById("ip");
                                var portobj = document.getElementById("port");
                                var dbNameobj = document.getElementById("dbName");
                                var usernameobj = document.getElementById("username");
                                var passwordobj = document.getElementById("password");
                                var dbtypeobj = document.getElementById("dbtype");

                                var ip = ipobj.value.replace(/(^\s*)|(\s*$)/g, '');
                                var port = portobj.value.replace(/(^\s*)|(\s*$)/g, '');
                                var dbName = dbNameobj.value.replace(/(^\s*)|(\s*$)/g, '');
                                var username = usernameobj.value.replace(/(^\s*)|(\s*$)/g, '');
                                var password = passwordobj.value.replace(/(^\s*)|(\s*$)/g, '');
                                var dbtype = dbtypeobj.value.replace(/(^\s*)|(\s*$)/g, '');

                                if (dbtype == '' || dbtype == null || dbtype == undefined) {
                                    layer.msg("请选择数据库");
                                } else if (ip == '' || ip == null || ip == undefined) {
                                    layer.msg("ip 不能为空");
                                } else if (port == '' || port == null || port == undefined) {
                                    layer.msg("port 不能为空");
                                } else if (dbName == '' || dbName == null || dbName == undefined) {
                                    layer.msg("dbname 不能为空");
                                } else if (username == '' || username == null || username == undefined) {
                                    layer.msg("username 不能为空");
                                } else if (password == '' || password == null || password == undefined) {
                                    layer.msg("password 不能为空");
                                }
                                else if ((ip != '' && ip != null && ip != undefined) && (port != '' && port != null && port != undefined) && (dbName != '' && dbName != null && dbName != undefined)) {

                                    $.ajax({
                                        // url: "http://127.0.0.1:8080/GeneratorCode/manageDb/connectDbTest",
                                        url: "http://127.0.0.1:8080/manageDb/connectDbTest",
                                        async: true,
                                        type: "post",
                                        data: {
                                            "ip" : ip,
                                            "port": port,
                                            "dbname": dbName,
                                            "username": username,
                                            "password": password,
                                            "dbtype": dbtype
                                        },
                                        success: function (data) {

                                            var dataJson = JSON.parse(data);

                                            if ('0' == dataJson.status) {
                                                layer.open({
                                                    type: 0,
                                                    title: "提示信息：",
                                                    content: dataJson.message //注意，如果str是object，那么需要字符拼接。
                                                });
                                            } else if ('1' == dataJson.status) {
                                                layer.open({
                                                    type: 0,
                                                    title: "提示信息：",
                                                    content: dataJson.message //注意，如果str是object，那么需要字符拼接。
                                                });
                                            }

                                        },
                                        error: function (error) {
                                            layer.msg("cuowu" + error);
                                            console.log(error);
                                        }

                                    });

                                }

                            });

                        });

                    </script>
                </div>
            </div>

        </div>

        <div class="layui-row layui-form-item" style="margin-top: 20px">

            <div class="layui-col-md4 ">
                <div class="layui-input-block layui-row">
                    <div class="layui-col-md2">
                        <label class="layui-form-label-col"> packagePath：</label>
                    </div>
                    <div class="layui-col-md8">
                        <input type="text" name="packagePath" required lay-verify="required\number" placeholder="请输入pacage的路径" class="layui-input" id="packagePath">
                    </div>
                </div>
            </div>

            <div class="layui-col-md4">

                <div class="layui-input-block layui-row">
                    <div class="layui-col-md2">
                        <label class="layui-form-label-col"> 作者：</label>
                    </div>
                    <div class="layui-col-md8">
                        <input type="text" name="author"  placeholder="请输入你的名字" class="layui-input" id="author">
                    </div>
                </div>

            </div>

            <div class="layui-col-md4">

                <div class="layui-input-block layui-row">
                    <div class="layui-col-md2">
                        <label class="layui-form-label-col"> 邮箱：</label>
                    </div>
                    <div class="layui-col-md8">
                        <input type="text" name="email"  placeholder="请输入邮箱地址" class="layui-input" id="email">
                    </div>
                </div>

            </div>

        </div>


        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>所连接数据库的信息：现仅仅支持单表创建。</legend>
        </fieldset>

        <div class="layui-row" style="margin-top: 20px">

            <div class="layui-col-md4">
                <div class="layui-col-md2 layui-col-md-offset3">
                    <button type="button" class="layui-btn layui-btn-normal" id="hqxx">获取信息</button>
                </div>
            </div>

            <script>
                layui.use(['form', 'layedit', 'laydate','element','jquery'], function() {
                    var form = layui.form,
                        layer = layui.layer,
                        element=layui.element,
                        $=layui.$;
                    $(document).on('click','#hqxx',function(){


                        var ipobj = document.getElementById("ip");
                        var portobj = document.getElementById("port");
                        var dbNameobj = document.getElementById("dbName");
                        var usernameobj = document.getElementById("username");
                        var passwordobj = document.getElementById("password");
                        var dbtypeobj = document.getElementById("dbtype");

                        var ip = ipobj.value.replace(/(^\s*)|(\s*$)/g, '');
                        var port = portobj.value.replace(/(^\s*)|(\s*$)/g, '');
                        var dbName = dbNameobj.value.replace(/(^\s*)|(\s*$)/g, '');
                        var username = usernameobj.value.replace(/(^\s*)|(\s*$)/g, '');
                        var password = passwordobj.value.replace(/(^\s*)|(\s*$)/g, '');
                        var dbtype = dbtypeobj.value.replace(/(^\s*)|(\s*$)/g, '');


                        if (ip == '' || ip == null || ip == undefined) {
                            layer.msg("ip 不能为空");
                        } else if (port == '' || port == null || port == undefined) {
                            layer.msg("port 不能为空");
                        } else if (dbName == '' || dbName == null || dbName == undefined) {
                            layer.msg("dbname 不能为空");
                        } else if (username == '' || username == null || username == undefined) {
                            layer.msg("username 不能为空");
                        } else if (password == '' || password == null || password == undefined) {
                            layer.msg("password 不能为空");
                        }
                        else if ((ip != '' && ip != null && ip != undefined) && (port != '' && port != null && port != undefined) && (dbName != '' && dbName != null && dbName != undefined)) {
                            console.log("-----")
                            // 加载表格
                            $("#tablediv").html(" <table class='layui-hide' id='test' lay-filter='test' ></table>");

                            setTimeout(function () {
                                layui.use('table', function(){
                                    var table = layui.table
                                        ,form = layui.form;

                                    table.render({
                                        elem: '#test'
                                        // ,url:'http://127.0.0.1:8080/GeneratorCode/manageDb/tableNameList'
                                        ,url:'http://127.0.0.1:8080/manageDb/tableNameList'
                                        ,method: "post"
                                        ,where: {
                                            dbtype: dbtype,
                                            ip: ip,
                                            port: port,
                                            dbname: dbName,
                                            username: username,
                                            password: password
                                        }
                                        ,contentType: 'application/json'
                                        ,cellMinWidth: 80
                                        ,cols: [[
                                            {type:'numbers'}
                                            ,{type: 'checkbox'}
                                            ,{field:'tableName', title:'表名', templet: '#usernameTpl'}
                                            ,{field:'tableComment', title:'注释'}
                                        ]]
                                        ,page: false
                                        ,parseData: function (res) {
                                            return {
                                                "code": res.code, //解析接口状态
                                                "msg": res.msg, //解析提示文本
                                                "count": 1000, //解析数据长度
                                                "data": res.data
                                            }
                                        }
                                        ,id:"testId"
                                    });

                                });

                            }, 0);

                        }

                    });

                });

            </script>


            <div class="layui-col-md4 layui-col-md-offset4">
                <div class="layui-col-md2 layui-col-md-offset7">
                    <button type="button" class="layui-btn layui-btn-danger" id="scdm" >生成代码</button>
                </div>

                <script>
                    layui.use(['form', 'layedit', 'laydate','element','jquery'], function() {
                        var form = layui.form,
                            layer = layui.layer,
                            element=layui.element,
                            $=layui.$;


                        $(document).on('click','#scdm',function(){


                            var ipobj = document.getElementById("ip");
                            var portobj = document.getElementById("port");
                            var dbNameobj = document.getElementById("dbName");
                            var usernameobj = document.getElementById("username");
                            var passwordobj = document.getElementById("password");
                            var packagePathobj = document.getElementById("packagePath");
                            var authorobj = document.getElementById("author");
                            var emailobj = document.getElementById("email");
                            var dbtypeobj = document.getElementById("dbtype");

                            var ip = ipobj.value.replace(/(^\s*)|(\s*$)/g, '');
                            var port = portobj.value.replace(/(^\s*)|(\s*$)/g, '');
                            var dbName = dbNameobj.value.replace(/(^\s*)|(\s*$)/g, '');
                            var username = usernameobj.value.replace(/(^\s*)|(\s*$)/g, '');
                            var password = passwordobj.value.replace(/(^\s*)|(\s*$)/g, '');
                            var packagePath = packagePathobj.value.replace(/(^\s*)|(\s*$)/g, '');
                            var author = authorobj.value.replace(/(^\s*)|(\s*$)/g, '');
                            var email = emailobj.value.replace(/(^\s*)|(\s*$)/g, '');
                            var dbtype = dbtypeobj.value.replace(/(^\s*)|(\s*$)/g, '');

                            layui.use('table', function(){
                                var table = layui.table
                                    ,form = layui.form;

                                var checkStatus = table.checkStatus('testId'); //idTest 即为基础参数 id 对应的值

                                var checkData = checkStatus.data;

                                if (checkData.length > 1) {
                                    console.log("请只选择一个数据");
                                } else if (checkData.length == 0){
                                    console.log("请选择一条数据");
                                }else {
                                    console.log("keyi le ");

                                    var tablename = checkData[0].tableName;

                                    // var url = 'http://127.0.0.1:8080/GeneratorCode/generatorCodeAction/generatorCode';
                                    var url = 'http://127.0.0.1:8080/generatorCodeAction/generatorCode';

                                    var info = "ip=" + ip + "&port=" + port + "&dbname=" + dbName + "&username=" + username + "&password=" + password + "&packagePath="
                                        + packagePath + "&author=" + author + "&email=" + email + "&tableName=" + tablename + "&dbtype=" + dbtype;

                                    console.log(info);

                                    var xhr = new XMLHttpRequest();

                                    xhr.open('POST', url, true);        // 也可以使用POST方式，根据接口

                                    xhr.responseType = "blob";    // 返回类型blob

                                    // 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑

                                    xhr.onload = function () {

                                        // 请求完成

                                        if (this.status === 200) {

                                            // 返回200

                                            var blob = this.response;

                                            var reader = new FileReader();

                                            reader.readAsDataURL(blob);    // 转换为base64，可以直接放入a表情href

                                            reader.onload = function (e) {

                                                // 转换完成，创建一个a标签用于下载

                                                var a = document.createElement('a');

                                                a.download = 'data.zip';

                                                a.href = e.target.result;

                                                $("body").append(a);    // 修复firefox中无法触发click
                                                // document.getElementsByTagName("body").append(a);

                                                a.click();

                                                $(a).remove();
                                                // document.getElementsByTagName("a").remove();

                                            }

                                        }

                                    };

                                    // 发送ajax请求
                                    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                                    xhr.send(info);
                                }

                            });

                        });

                    });

                </script>

            </div>

        </div>

        <div class="layui-row">

            <div class="layui-col-md10 layui-col-md-offset1"  id="tablediv">

                <script type="text/html" id="switchTpl">
                    <!-- 这里的 checked 的状态只是演示 -->
                    <input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-text="女|男" lay-filter="sexDemo" {{ d.id == 10003 ? 'checked' : '' }}>
                </script>

                <script type="text/html" id="checkboxTpl">
                    <!-- 这里的 checked 的状态只是演示 -->
                    <input type="checkbox" name="lock" value="{{d.id}}" title="锁定" lay-filter="lockDemo" {{ d.id == 10006 ? 'checked' : '' }}>
                </script>

            </div>

        </div>

    </form>

    <script>
        //注意：导航 依赖 element 模块，否则无法进行功能性操作
        layui.use('element', function(){
            var element = layui.element;

        });

        layui.use('form', function(){
            var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功

            //但是，如果你的HTML是动态生成的，自动渲染就会失效
            //因此你需要在相应的地方，执行下述方法来手动渲染，跟这类似的还有 element.init();
            form.render();

        });
    </script>

</body>
</html>